<template>
    <div>
        <!-- 标题区域 -->
        <van-nav-bar title="购物车" fixed></van-nav-bar>
        <div style="height: 45px;"></div>
        <!-- 渲染 -->
        <div v-show="!cartSstatus"  v-for="item in cartData">
            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                            <img :src="item.goods.goods_small_logo ? item.goods.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
                                alt="" style="width: 70px;height: 70px;">
                        </div>
                    </template>
                    <template #num>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                    </template>
                </van-card>
                <template #right> 
                    <van-button square text="删除" type="danger" class="delete-button" style="height: 100%;"
                        @click="del(item.id)" />
                </template>
            </van-swipe-cell>
        </div>
        <van-empty v-show="cartSstatus" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="购物车数据空空如也" />
        <van-submit-bar :price="allPrice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checkedAll">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useCounterStore } from '@/stores/cart'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let cartData = ref([])
let cartSstatus = ref(false)
const cart = () => {
    cartData.value = store.piniaCart
    if(cartData.value.length == 0){
        cartSstatus.value = true;
    }else{
        cartSstatus.value = false;
    }
}
cart()
const del = (id) => {
    store.piniaCart = store.piniaCart.filter(item => item.id != id)
    cart()
}
let checkedAll = computed({
    get() {
        if (cartData.value.length == 0) {
            return false
        } else {
            return cartData.value.every(item => item.checked)
        }
    },
    set(val) {
        cartData.value.forEach(item => item.checked = val)
    }
})
let allPrice = computed(() => {
    let allPrice = ref(0)

    let cartOk = cartData.value.filter(item => item.checked)
    cartOk.forEach(item => {
        allPrice.value += (item.number * (item.goods.goods_price * 10)) / 10
    })
    return allPrice.value * 100
})
import { showSuccessToast, showFailToast } from 'vant';
import { orderApi } from '@/api/api'
import { useRouter } from 'vue-router'
const router = useRouter()
// let orderData = ref([])
const onSubmit = ()=>{
    let cartOk = cartData.value.filter(item => item.checked)
    console.log('生成订单参数',cartOk)
    if(cartOk.length == 0){
        showFailToast('请选择商品')
    }else{
        orderApi({
            goodsIds:cartOk.map(item => item.goods.goods_id).join(','),
            username:localStorage.getItem('username'),
            product_code:cartOk[0].goods.goods_name + '等件商品',
            totalPrice:allPrice.value * 100,
            nums:cartOk.map(item => item.number).join(',')
        }).then(res=>{
            console.log('订单数据',res)
            router.push('/orderdetail/'+res.data.data.orderId)
        })
    }
}
</script>

<style lang="scss" scoped></style>